<template>
  <div class="">
    <div class="background-plate"></div>
    <div class="top-area">
      <div class="top-btn">
        <van-button icon="apps-o" type="primary" plain />
        <van-button icon="envelop-o" type="primary" plain />
      </div>
      <div class="head-shot">
        <div class="round-frame">
          <van-uploader :after-read="afterRead">
            <van-button icon="photograph" type="primary"></van-button>
          </van-uploader>
        </div>
      </div>
      <div class="usename">{{currentUser}}</div>
    </div>
    <div class="bottom-area">
      <div class="bottom-area-main">
        <div class="top">
          <div class="attent">关注 <span>0</span></div>
          <div class="options">
            <span class="selected">主页</span><span>动态</span><span>相册</span>
          </div>
          <div class="top10">
            <div class="head-shot"></div>
            <div>创建我的书影音</div>
            <img src="@/assets/mine/top10.png" alt="" class="top10-img" />
            <!-- <img src="@/assets/mine/envelope.png" alt="" class="envelope"> -->
          </div>
          <div class="history">
            <img src="@/assets/mine/rocket.png" alt="" class="top10-img" />
            <div>我看过的影视</div>
            <van-button icon="arrow" type="default" plain  to="/history"/>
          </div>
          <div class="files">
            <div class="title">
              书影音档案
              <van-button icon="arrow" type="default" plain />
            </div>
            <div class="classify">
              <div class="alternative">
                <div class="txt-font">
                  图书
                  <van-button icon="arrow" type="default" plain />
                </div>
                <div class="lcon">
                  <img src="@/assets/mine/book.png" alt="" />
                </div>
                <div class="text">记录你想读，在读，读过的书</div>
              </div>
              <div class="alternative">
                <div class="txt-font">
                  影视
                  <van-button icon="arrow" type="default" plain />
                </div>
                <div class="lcon">
                  <img src="@/assets/mine/movies.png" alt="" />
                </div>
                <div class="text">记录你想看，在看，看过的影视</div>
              </div>
              <div class="alternative">
                <div class="txt-font">
                  音乐
                  <van-button icon="arrow" type="default" plain />
                </div>
                <div class="lcon">
                  <img src="@/assets/mine/music.png" alt="" />
                </div>
                <div class="text">记录你想听，在听，听过的音乐</div>
              </div>
            </div>
            <div class="badge">
              <div>
                <img src="@/assets/mine/badge.png" alt="" />
                &nbsp;&nbsp;徽章&nbsp;&nbsp; <span>0</span>
              </div>
              <div>
                <van-button icon="apps-o" type="default" plain />
                <van-button icon="arrow-down" type="default" plain />
                <!-- <van-icon name="arrow-down" /> -->
              </div>
            </div>
          </div>
          <div class="group">
            <div>我的小组</div>
            &nbsp;&nbsp;<span>你还没有加入任何小组</span>&nbsp;&nbsp;
            <van-button icon="arrow" type="default" plain />
          </div>
        </div>
        <div class="trends">
          <div class="btn">
            <van-button disabled type="default">动态</van-button>
            <van-button type="default">全部</van-button>
          </div>
        </div>
        <div class="bottom">
          <div class="title">
            <h3>还没有发过动态，<br />看看别人在说什么...</h3>
          </div>
          <div class="suggest">
            <div>
              <van-icon name="comment" />
              你为什么喜欢电影？
            </div>
            <van-button icon="arrow" type="default" plain />
          </div>
          <div class="suggest">
            <div>
              <van-icon name="comment" />
              你的人生座右铭？
            </div>
            <van-button icon="arrow" type="default" plain />
          </div>
          <div class="suggest">
            <div>
              <van-icon name="comment" />
              你是怎么度过人生迷茫期的？
            </div>
            <van-button icon="arrow" type="default" plain />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue';
// import { Icon } from 'vant';
export default {
  name: '',
  data () {
    return {
      currentUser: null,
    }
  },
  methods: {
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
  },
  computed: {},
  components: {},
  created () {
    const currentUser = sessionStorage.getItem('current-user') || ''
    if (currentUser === '') {
      this.$router.push('/login')
    }
    console.log(currentUser)
    this.currentUser = currentUser
  },
}
</script>

<style lang="less" scoped>
* {
  position: relative;
}
.background-plate {
  width: 100%;
  height: 300px;
  background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20180526/60a21af360d2457c950295839bea8feb.jpeg");

  background-repeat: no-repeat;
  background-size: 100% auto;
  filter: blur(15px);
}
.top-area {
  width: 330px;
  height: 200px;
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: -165px;
}
.top-btn {
  display: flex;
  justify-content: space-between;
  .van-button--plain,
  .van-button--primary {
    color: #fff;
    background-color: rgba(255, 255, 255, 0);
    border: none;
  }
  .van-button__icon {
    font-size: 2em;
  }
  .van-button--normal {
    padding: 0;
  }
}
.head-shot {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  .round-frame {
    width: 60px;
    height: 60px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20180526/60a21af360d2457c950295839bea8feb.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    .van-button {
      height: 30px;
    }
    .van-button--normal {
      padding: 0 8px;
      font-size: 14px;
    }
    .van-uploader {
      position: absolute;
      top: 40px;
      left: 40px;
      .van-button--primary {
        color: #000;
        background-color: #fff;
        border: none;
        border-radius: 50%;
      }
    }
  }
}
.usename {
  margin-top: 20px;
  font-size: 2em;
  color: #fff;
}
.bottom-area {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 30px 30px 0 0;
  position: absolute;
  top: 280px;

  .bottom-area-main {
    // margin-top: 20px;
    // margin: 0 auto;
    // height: 500px;
    // padding: 10px;
    .top {
      margin: 0 auto;
      height: 500px;
      padding: 10px;
      width: 330px;
      .attent {
        margin-top: 20px;
        font-size: 16px;
        color: #191919;
        line-height: 20px;
      }
      .options {
        margin-top: 10px;
        font-size: 16px;
        color: #818181;
        line-height: 20px;
        span {
          margin-right: 25px;
          padding-bottom: 10px;
        }
        .selected {
          color: #191919;
          border-bottom: solid #191919 3px;
        }
      }
      .top10 {
        margin-top: 20px;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        background-image: url("../../assets/mine/envelope.png");
        background-repeat: no-repeat;
        background-size: auto 50px;
        background-position: right;
        font-size: 16px;
        .head-shot {
          margin-left: 10px;
          margin-right: 15px;
          background-image: url("http://5b0988e595225.cdn.sohucs.com/images/20180526/60a21af360d2457c950295839bea8feb.jpeg");
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .top10-img {
          height: 16px;
          margin-left: 10px;
        }
        // .envelope{
        //   height: 50px;
        // }
      }
      .history {
        margin-top: 20px;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        img {
          height: 30px;
          margin-left: 10px;
        }
        div {
          margin-right: 10px;
        }
        .van-button--plain,
        .van-button--primary {
          // color: #fff;
          background-color: rgba(255, 255, 255, 0);
          border: none;
        }
        .van-button__icon {
          font-size: 2em;
        }
        .van-button--normal {
          padding: 0;
        }
      }
      .files {
        margin-top: 20px;
        width: 100%;
        height: 200px;
        border-radius: 10px;
        background-color: #fff;
        font-size: 16px;
        .title {
          height: 50px;
          line-height: 50px;
          font-size: 16px;
          margin-left: 10px;
          display: flex;
          align-items: center;
          .van-button--plain,
          .van-button--primary {
            color: #818181;
            background-color: rgba(255, 255, 255, 0);
            border: none;
          }
          .van-button__icon {
            font-size: 1em;
          }
          .van-button--normal {
            padding: 0;
          }
        }
        .classify {
          margin: 0 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .alternative {
            width: 95px;
            height: 95px;
            border: 1px #818181 solid;
            border-radius: 10px;
            .txt-font {
              font-size: 14px;
              line-height: 30px;
              margin-left: 10px;
              display: flex;
              align-items: center;
              .van-button--plain,
              .van-button--primary {
                color: #818181;
                background-color: rgba(255, 255, 255, 0);
                border: none;
              }
              .van-button__icon {
                font-size: 1em;
              }
              .van-button--normal {
                padding: 0;
              }
              .van-button {
                height: 30px;
              }
            }
            .lcon {
              width: 100%;
              height: 30px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            img {
              width: 15px;
              height: 15px;
            }
            .text {
              margin-left: 10px;
              font-size: 0.1em;
              color: #818181;
              margin-bottom: 0;
            }
          }
        }
        .badge {
          display: flex;
          justify-content: space-between;
          margin: 0 10px;
          margin-top: 10px;
          div {
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            display: flex;
            align-items: center;
            img {
              height: 20px;
            }
            .van-button--plain,
            .van-button--primary {
              color: #818181;
              background-color: rgba(255, 255, 255, 0);
              border: none;
            }
            .van-button__icon {
              font-size: 1em;
            }
            .van-button--normal {
              padding: 0;
            }
            .van-button {
              height: 50px;
            }
          }
        }
      }
      .group {
        margin-top: 20px;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        font-size: 16px;
        // padding-left: 10px;
        div {
          margin-left: 10px;
        }
        span {
          color: #818181;
          font-size: 14px;
        }
        .van-button--plain,
        .van-button--primary {
          color: #818181;
          background-color: rgba(255, 255, 255, 0);
          border: none;
        }
        .van-button__icon {
          font-size: 1em;
        }
        .van-button--normal {
          padding: 0;
        }
        .van-button {
          height: 50px;
        }
      }
    }
    .trends {
      margin-top: 20px;
      width: 100%;
      height: 50px;
      // border-radius: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 16px;
      // padding-right: 10px;
      .btn {
        margin-right: 10px;
        .van-button--plain,
        .van-button--primary {
          color: #818181;
          background-color: rgba(255, 255, 255, 0);
          // border: none;
        }
        .van-button__icon {
          font-size: 1em;
        }
        .van-button--normal {
          padding: 0 10px;
        }
        .van-button {
          height: 30px;
        }
        .van-button--default {
          border-radius: 10px;
          // border: none;
        }
      }
    }
    .bottom {
      margin: 0 auto;
      height: 400px;
      padding: 10px;
      width: 330px;
      .title {
        margin-top: 20px;
      }
      .suggest {
        margin-top: 20px;
        width: 100%;
        height: 50px;
        border-radius: 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .van-icon {
          color: #42bd56;
          margin-left: 10px;
          margin-right: 10px;
        }
        .van-button--plain,
        .van-button--primary {
          color: #818181;
          background-color: rgba(255, 255, 255, 0);
          border: none;
        }
        .van-button__icon {
          font-size: 1em;
        }
        .van-button--normal {
          padding: 0;
        }
        .van-button {
          height: 50px;
        }
      }
    }
  }
}
</style>
